<template>
  <div>
    <div>
      <span class="title">开店流程</span>
      <el-steps :active="2" align-center>
        <el-step title="提交资料" description="填写店铺信息及经营资质信息"></el-step>
        <el-step title="资料审核" description="等待资料审核（1-3个工作日）"></el-step>
        <el-step title="开门营业" description="完成开店前准备任务后就可以开门营业啦"></el-step>
      </el-steps>
    </div>

    <el-button size="medium" style="font-size: 50px" type="success" @click="() => {this.submitVisible=true}">我要开店</el-button>

    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>我的申请</span>
        </div>

            <span style="float: left;" v-text="myRest.restaurantName"></span>
            <!--价格:单价乘数量-->
            <el-tag style="float: right;" v-if="myRest.status===0" type="warning">审核中</el-tag>
            <el-tag style="float: right;" v-if="myRest.status===1" type="success">审核通过</el-tag>
            <el-tag style="float: right;" v-if="myRest.status===2" >开始营业</el-tag>
            <el-button v-if="myRest.status===1" type="success" @click="confirmOpen(myRest.id)">确认开店</el-button>


        <el-divider></el-divider>
        <div class="clearfix">
          <span>footer</span>
        </div>
      </el-card>
    </div>

    <!--开店要求-->
    <div class="el-footer">
      <span class="title">开店要求</span>
      <el-row>
        <el-col :span="8">
          <i class="el-icon-s-shop icon-warp"></i><br/>
          <span class="title-require">有实体门店</span>
        </el-col>
        <el-col :span="8">
          <i class="el-icon-s-claim icon-warp"></i><br/>
          <span class="title-require">有经营资格</span>
        </el-col>
        <el-col :span="8">
          <i class="el-icon-s-order icon-warp"></i><br/>
          <span class="title-require">品类范围</span>
        </el-col>
      </el-row>
    </div>

    <!--店铺加盟,填资料-->
    <el-dialog
      title="提交资料"
      :visible.sync="submitVisible"
      width="30%"
      :before-close="handleClose">

      <el-form
          label-position="left"
          label-width="100px"
          ref="registerInfoRef"
          class="demo-ruleForm"
          :rules="rules"
          :model="registerInfo"
      >

        <el-form-item prop="restaurantName" label="店名">
          <el-input v-model="registerInfo.restaurantName" value=""></el-input>
        </el-form-item>
        <el-form-item prop="desc" label="描述">
          <el-input v-model="registerInfo.desc" value=""></el-input>
        </el-form-item>
        <el-form-item prop="restaurantImg" label="图片">
          <el-row>
            <el-col style="width: 100px; height: 100px" :span="6">
              <el-image v-if="registerInfo.restaurantImg"
                  style="width: 100px; height: 100px"
                  :src="registerInfo.restaurantImg"
                  :preview-src-list="[registerInfo.restaurantImg]" class="avatar">
              </el-image>
            </el-col>
            <el-col :span="12"
                    style="text-align: left; position: absolute;left: 60%;top: 50%;transform: translate(-50%, -50%);">
              <el-upload
                  action="#"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-col>
          </el-row>




        </el-form-item>
        <el-form-item  prop="address" label="地址">
          <el-input v-model="registerInfo.address" value=""></el-input>
        </el-form-item>
        <el-form-item  prop="mobile" label="餐厅电话">
          <el-input v-model="registerInfo.mobile" value=""></el-input>
        </el-form-item>
        <el-form-item  label="餐盒费用">
          <el-input v-model="registerInfo.boxCost" value="0"></el-input>
        </el-form-item>
        <el-form-item  label="餐厅资金">
          <el-input v-model="registerInfo.money" value="0.0"></el-input>
        </el-form-item>
        <el-form-item prop="ownerName" label="餐厅持有人">
          <el-input v-model="registerInfo.ownerName" value=""></el-input>
        </el-form-item>
        <el-form-item  prop="email" label="联系邮箱">
          <el-input v-model="registerInfo.email" value=""></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">立即创建</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>

</template>

<script>
    export default {
      name: "RegisterRestaurant",
      inject: ['reload'],
      data() {
        // 电话号码验证
        var checkPhone = (rule, value, callback) => {
          const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
          if (!value) {
            return callback(new Error('餐厅电话不能为空'))
          }
          setTimeout(() => {
            if (!Number.isInteger(+value)) {
              callback(new Error('请输入数字值'))
            } else {
              if (phoneReg.test(value)) {
                callback()
              } else {
                callback(new Error('餐厅电话格式不正确'))
              }
            }
          }, 100);
        };
        return {
          step: 1,  //0,1,2,3
          submitVisible: false,
          registerInfo: {
            id: null,
            restaurantName: '',
            desc: '',
            restaurantImg: '',
            address: '',
            mobile: '',
            money: 0,
            ownerName: '',
            email: '',
            boxCost: 0.0,
            createTime: null
          },
          // 我的店铺列表
          myRest: {},
          rules:{
            restaurantName: [{ required: true, message: '请填写店名', trigger: 'blur' },],
            desc: [{ required: true, message: '请填写描述', trigger: 'blur' },],
            restaurantImg: [{ required: true, message: '店铺照片不能为空', trigger: 'blur' },],
            address: [{ required: true, message: '请填写地址', trigger: 'blur' },],
            mobile: [
              {required: true, trigger: 'blur', validator: checkPhone}],
            ownerName: [{ required: true, message: '请填写餐厅持有人', trigger: 'blur' },],
            email: [
                { required: true, message: '请填写邮箱', trigger: 'blur' },
              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
            ],

          }
        }
      },
      created() {
       this.getRest();
      },
      methods: {
        getRest(){
          this.$axios({
            method: "get",
            url: "/rest/myrest",
            params: {
              uid: this.$store.state.user.id
            }
          })
              .then(response => {
                if (response.data.success) {
                  console.log(response.data.message);
                  this.myRest=response.data.my_rest;
                } else {
                  console.log(response.data.message)
                }
              })
              .catch(error => console.log(error));
        },
        handleClose(done) {

          this.submitVisible=false;
        },
        //提交资料信息
        submitForm() {
          this.$refs.registerInfoRef.validate((valid) => {
            if (valid) {
              this.$axios({
                method: "post",
                url: "/rest/register",
                data: {
                  restaurantName: this.registerInfo.restaurantName,
                  userId: this.$store.getters.uid,
                  description: this.registerInfo.desc,
                  restaurantImg: this.registerInfo.restaurantImg,
                  address: this.registerInfo.address,
                  mobile: this.registerInfo.mobile,
                  money: this.registerInfo.money,
                  ownerName: this.registerInfo.ownerName,
                  email: this.registerInfo.email,
                  boxCost: this.registerInfo.boxCost,
                  createTime: new Date().getTime()
                }
              })
                  .then(response => {
                    if (response.data.success) {
                      this.$router.push("/");
                    } else {
                      console.log(response.data.message);
                    }
                  })
                  .catch(error => console.log(error));
            }else {
              return this.$message.error("信息填写不完整！");
            }
          })


        },
        resetForm() {
        this.$refs.registerInfoRef.resetFields();
        },

        confirmOpen(id) {
          this.$axios({
            method: "get",
            url: "/rest/open",
            params: {
              id: id
            }
          })
            .then(response => {
              if (response.data.success) {
                this.reload();
              }
              console.log(response.data.message);
            })
            .catch(error => console.log(error))
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt50M = file.size / 1024 / 1024 < 50

          if (!isJPG) {
            this.$message.error('上传图片只能是 JPG 格式!');
          }
          if (!isLt50M) {
            this.$message.error('上传图片大小不能超过 50MB!');
          }

          let formData = new FormData();//文件转换
          formData.append("file", file);
          console.log(file)
          this.$axios.post('/main/addImg', formData, {"Content-Type": "multipart/form-data;charset=utf-8"})
              .then((res) => {
                this.registerInfo.restaurantImg = "http://localhost:8080/" + res.data;
              }).catch((error) => {
            console.log(error)
          })

          return isJPG && isLt50M;
        }

      }

    }
</script>

<style scoped>
  .title {
    font-size: 30px;
  }

  .title-require {
    font-size: 18px;
  }

  .icon-warp {
    font-size: 100px
  }

</style>
